<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import Graphic from '@arcgis/core/Graphic'
import gaodeLayer from '@/utils/GaoDeBaseLayer'
import Query from '@arcgis/core/rest/support/Query.js'
import { useUserStore } from '@/stores/user'
import type { FormInstance } from 'element-plus'
import {
  Picture,
  QuestionFilled,
  Location,
  ZoomIn,
  ZoomOut,
  House,
  Search,
  Filter,
  Plus,
  Loading,
  Check,
  Close,
  InfoFilled,
  ArrowLeft,
  ArrowRight,
} from '@element-plus/icons-vue'
import { nextTick } from 'vue'

interface Issue {
  id: string
  facilityId: string
  facilityName: string
  date: string
  reporter_name: string
  type: string
  description: string
  status: string
  priority: string
  adminReply?: string
}

interface Facility {
  OBJECTID: number
  Name: string
  FacilityType: string
  address: string
  photo?: string
  Issues?: string
  graphic?: Graphic
}

// 获取用户状态
const userStore = useUserStore()

// 状态变量
const showAttributeDialog = ref(false)
const showAddIssueDialog = ref(false)
const submitting = ref(false)
let selectedFeature :Graphic | null = null
const issues = ref<Issue[]>([])
let facilityLayer: FeatureLayer | null = null
const SelectRefreshKey = ref(0)

// 设施列表相关
const facilities = ref<Facility[]>([])
const loading = ref(false)
const searchKeyword = ref('')
const filterType = ref('')
const selectedFacilityId = ref<number | null>(null)

// 分步表单相关
const activeStep = ref(0)
const issueFormRef = ref<FormInstance>()

// 问题表单
const issueForm = reactive({
  id: '',
  facilityId: '',
  facilityName: '',
  date: '',
  reporter_name: '',
  type: '',
  status: '待处理',
  description: '',
  priority: '中',
  adminReply: '',
  images: [] as any[],
})

// 表单验证规则
const issueRules = {
  type: [{ required: true, message: '请选择问题类型', trigger: 'change' }],
  description: [{ required: true, message: '请输入问题描述', trigger: 'blur' }],
  priority: [{ required: true, message: '请选择优先级', trigger: 'change' }],
}

// 地图和视图引用
let view: MapView | null = null

// 筛选后的设施列表
const filteredFacilities = computed(() => {
  return facilities.value.filter((facility) => {
    const matchesKeyword =
      searchKeyword.value === '' ||
      facility.Name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      facility.address.toLowerCase().includes(searchKeyword.value.toLowerCase())

    const matchesType = filterType.value === '' || facility.FacilityType === filterType.value

    return matchesKeyword && matchesType
  })
})

// 设施类型选项
const facilityTypes = [
  { value: '教室', label: '教室' },
  { value: '实验室', label: '实验室' },
  { value: '办公室', label: '办公室' },
  { value: '图书馆', label: '图书馆' },
  { value: '体育馆', label: '体育馆' },
  { value: '食堂', label: '食堂' },
  { value: '宿舍', label: '宿舍' },
  { value: '其他', label: '其他' },
]

onMounted(() => {
  initMap()
})

onUnmounted(() => {
  if (view) {
    view = null
  }
})

// 初始化地图
const initMap = () => {
  try {
    // 创建地图实例
    const map = new Map({
      basemap: {
        baseLayers: [gaodeLayer],
      },
    })

    // 创建地图视图
    view = new MapView({
      container: 'viewDiv',
      map: map,
      center: [116.3, 39.9], // 北京的经纬度
      zoom: 10,
    })

    // 创建学校设施要素图层
    facilityLayer = new FeatureLayer({
      url: 'https://services7.arcgis.com/7XPW9RycLUzz2YAj/arcgis/rest/services/SchoolFacilityManagement/FeatureServer/0',
      outFields: ['*'], // 获取所有字段
      renderer: {
        type: 'simple',
        symbol: {
          type: 'simple-marker',
          style: 'circle',
          size: 8,
          color: [0, 112, 255, 0.8],
          outline: {
            color: [255, 255, 255],
            width: 1,
          },
        },
      },
    })

    // 添加图层到地图
    map.add(facilityLayer)

    // 加载设施列表
    loadFacilities()

    // 添加点击事件
    view.on('click', (event) => {
      // 执行空间查询
      const query = new Query({
        geometry: event.mapPoint, // 获取点击位置
        distance: 100, // 查询半径
        units: 'meters',
        spatialRelationship: 'intersects',
        outFields: ['*'], // 获取所有字段
        returnGeometry: true,
      })

      // 执行查询
      facilityLayer!
        .queryFeatures(query)
        .then((result) => {
          if (result.features.length > 0) {
            // 获取第一个匹配的要素
            const feature = result.features[0]
            selectedFeature = feature
            selectedFacilityId.value = feature.attributes.OBJECTID

            // 解析JSON字符串字段
            try {
              if (feature.attributes.Issues) {
                issues.value = JSON.parse(feature.attributes.Issues)
              } else {
                issues.value = []
              }
            } catch (error) {
              console.error('解析JSON数据失败:', error)
              issues.value = []
            }

            // 显示属性对话框
            nextTick(() => {
              SelectRefreshKey.value++
            })
            showAttributeDialog.value = true
          } else {
            ElMessage.info('未找到设施')
          }
        })
        .catch((error) => {
          console.error('查询失败:', error)
          ElMessage.error('查询设施信息失败')
        })
    })
  } catch (error) {
    console.error('初始化地图失败:', error)
    ElMessage.error('初始化地图失败')
  }
}

// 加载设施列表
const loadFacilities = async () => {
  if (!facilityLayer) return

  loading.value = true
  try {
    const query = new Query({
      where: '1=1', // 查询所有设施
      outFields: ['*'],
      returnGeometry: true,
    })

    const result = await facilityLayer.queryFeatures(query)

    facilities.value = result.features.map((feature) => {
      return {
        OBJECTID: feature.attributes.OBJECTID,
        Name: feature.attributes.Name || '未命名设施',
        FacilityType: feature.attributes.FacilityType || '其他',
        address: feature.attributes.address || '无地址信息',
        photo: feature.attributes.photo,
        Issues: feature.attributes.Issues,
        graphic: feature,
      }
    })
  } catch (error) {
    console.error('加载设施列表失败:', error)
    ElMessage.error('加载设施列表失败')
  } finally {
    loading.value = false
  }
}

// 选择设施
const selectFacility = async (facilityID: string) => {
  const result = await facilityLayer!.queryFeatures({
    where: `OBJECTID = ${facilityID}`,
    outFields: ['*'],
    returnGeometry: true,
  })
  let facility = result.features[0]
  selectedFacilityId.value = facility.attributes.OBJECTID
  selectedFeature = facility

  // 解析问题列表
  try {
    if (facility.attributes.Issues) {
      issues.value = JSON.parse(facility.attributes.Issues)
    } else {
      issues.value = []
    }
  } catch (error) {
    console.error('解析JSON数据失败:', error)
    issues.value = []
  }

  // 如果有地图视图，将地图中心移动到选中的设施位置
  if (view && facility) {
    view.goTo({
      target: facility.geometry,
      zoom: 15,
    })
  }

  // 显示详情对话框
  nextTick(() => {
    SelectRefreshKey.value++
  })
  showAttributeDialog.value = true
}

// 打开问题提交对话框
const openAddIssueDialog = () => {
  if (!selectedFeature) {
    ElMessage.warning('请先选择一个设施')
    return
  }

  // 重置表单
  resetIssueForm()

  // 重置步骤
  activeStep.value = 0

  // 打开对话框
  showAddIssueDialog.value = true
}

// 重置问题表单
const resetIssueForm = () => {
  Object.assign(issueForm, {
    id: '',
    facilityId: selectedFeature?.attributes.OBJECTID || '',
    facilityName: selectedFeature?.attributes.Name || '',
    date: '',
    reporter_name: '',
    type: '',
    status: '待处理',
    description: '',
    priority: '中',
    adminReply: '',
    images: [],
  })
}

// 下一步
const nextStep = async () => {
  if (activeStep.value === 0) {
    // 验证第一步表单
    if (!issueFormRef.value) return

    await issueFormRef.value.validate((valid) => {
      if (valid) {
        activeStep.value++
      }
    })
  } else {
    activeStep.value++
  }
}

// 上一步
const prevStep = () => {
  activeStep.value--
}

// 提交问题
const submitIssue = async () => {
  if (!selectedFeature || !facilityLayer) {
    ElMessage.error('设施信息不完整，无法提交')
    return
  }

  submitting.value = true
  try {
    // 创建新问题
    const newIssue: Issue = {
      id: crypto.randomUUID(), // 生成唯一ID
      facilityId: selectedFeature.attributes.OBJECTID || '',
      facilityName: selectedFeature.attributes.Name || '',
      date: new Date().toISOString().split('T')[0],
      reporter_name: userStore.userInfo?.name || '',
      type: issueForm.type,
      description: issueForm.description,
      status: '待处理',
      priority: issueForm.priority,
      adminReply: '',
    }

    // 添加到问题列表
    const updatedIssues = [...issues.value, newIssue]

    // 克隆选中的要素
    const updatedFeature = selectedFeature.clone()

    // 更新要素属性
    updatedFeature.attributes = {
      ...updatedFeature.attributes,
      Issues: JSON.stringify(updatedIssues),
      OBJECTID: selectedFeature.attributes.OBJECTID, // 保留原始ID
    }

    // 应用编辑
    const results = await facilityLayer.applyEdits({
      updateFeatures: [updatedFeature],
    })

    if (results.updateFeatureResults.length > 0) {
      ElMessage.success('问题提交成功')
      issues.value = updatedIssues
      showAddIssueDialog.value = false

      // 更新设施列表中的数据
      const index = facilities.value.findIndex(
        (f) => f.OBJECTID === selectedFeature?.attributes.OBJECTID,
      )
      if (index !== -1) {
        facilities.value[index].Issues = JSON.stringify(updatedIssues)
      }

      // 重置表单
      resetIssueForm()
    } else {
      ElMessage.error('问题提交失败')
    }
  } catch (error) {
    console.error('提交问题失败:', error)
    ElMessage.error('提交问题失败')
  } finally {
    submitting.value = false
  }
}

// 操作指引相关
const showGuide = ref(false)
const guideSteps = [
  {
    title: '浏览设施列表',
    icon: 'list',
    description: '在左侧列表中浏览所有设施，可以通过搜索和筛选快速找到目标设施',
  },
  {
    title: '选择设施',
    icon: 'select',
    description: '点击列表中的设施或地图上的设施点查看详细信息',
  },
  {
    title: '提交问题',
    icon: 'warning',
    description: '学生用户可以通过分步表单提交关于设施的问题报告',
  },
  {
    title: '查看地图',
    icon: 'map',
    description: '右侧地图显示所有设施的位置，可以直接在地图上选择设施',
  },
]
</script>

<template>
  <div class="dashboard-container">
    <!-- 分屏布局：左侧设施列表，右侧地图 -->
    <div class="dashboard-layout">
      <!-- 左侧设施列表面板 -->
      <div class="facility-panel">
        <div class="panel-header">
          <h2>校园设施列表</h2>
          <div class="search-bar">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索设施名称或地址"
              clearable
              :prefix-icon="Search"
            />
          </div>
          <div class="filter-bar">
            <el-select
              v-model="filterType"
              placeholder="按类型筛选"
              clearable
              class="filter-select"
            >
              <el-option
                v-for="type in facilityTypes"
                :key="type.value"
                :label="type.label"
                :value="type.value"
              />
            </el-select>
          </div>
        </div>

        <div class="facility-list" v-loading="loading">
          <el-empty v-if="filteredFacilities.length === 0" description="未找到设施" />
          <div
            v-for="facility in filteredFacilities"
            :key="facility.OBJECTID"
            class="facility-item"
            :class="{ 'facility-item-active': selectedFacilityId === facility.OBJECTID }"
            @click="selectFacility(String(facility.OBJECTID))"
          >
            <div class="facility-icon">
              <el-icon v-if="facility.FacilityType === '教室'"><House /></el-icon>
              <el-icon v-else-if="facility.FacilityType === '实验室'"><InfoFilled /></el-icon>
              <el-icon v-else><Location /></el-icon>
            </div>
            <div class="facility-info">
              <h3>{{ facility.Name }}</h3>
              <p class="facility-type">{{ facility.FacilityType }}</p>
              <p class="facility-address">{{ facility.address }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧地图 -->
      <div class="map-container">
        <div id="viewDiv" class="map-view">
          <!-- 操作指引按钮 -->
          <div class="guide-button">
            <el-popover placement="left" :width="300" trigger="click" v-model:visible="showGuide">
              <template #reference>
                <el-button type="primary" circle>
                  <el-icon><QuestionFilled /></el-icon>
                </el-button>
              </template>
              <div class="guide-content">
                <h3>操作指引</h3>
                <el-divider />
                <div v-for="(step, index) in guideSteps" :key="index" class="guide-step">
                  <div class="step-icon">
                    <el-icon v-if="step.icon === 'location'"><Location /></el-icon>
                    <el-icon v-else-if="step.icon === 'list'"><Filter /></el-icon>
                    <el-icon v-else-if="step.icon === 'select'"><InfoFilled /></el-icon>
                    <el-icon v-else-if="step.icon === 'warning'"><QuestionFilled /></el-icon>
                    <el-icon v-else-if="step.icon === 'map'"><Picture /></el-icon>
                    <el-icon v-else><ZoomIn /></el-icon>
                  </div>
                  <div class="step-content">
                    <h4>{{ step.title }}</h4>
                    <p>{{ step.description }}</p>
                  </div>
                </div>
              </div>
            </el-popover>
          </div>
        </div>
      </div>
    </div>

    <!-- 属性信息弹窗 -->
    <el-dialog
      v-model="showAttributeDialog"
      title="设施详情"
      width="60%"
      destroy-on-close
      custom-class="facility-dialog"
      :key='SelectRefreshKey'
    >
      <div v-if="selectedFeature" class="facility-details">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="名称">{{
            selectedFeature.attributes.Name || '未知'
          }}</el-descriptions-item>
          <el-descriptions-item label="设施类型">{{
            selectedFeature.attributes.FacilityType || '未知'
          }}</el-descriptions-item>
          <el-descriptions-item label="地址">{{
            selectedFeature.attributes.address || '未知'
          }}</el-descriptions-item>
        </el-descriptions>

        <!-- 照片展示部分 -->
        <div class="section-title">
          <h3>
            <el-icon><Picture /></el-icon> 设施照片
          </h3>
        </div>
        <div v-if="selectedFeature.attributes.photo" class="facility-photo-section">
          <el-image
            :src="selectedFeature.attributes.photo"
            :preview-src-list="[selectedFeature.attributes.photo]"
            fit="cover"
            style="max-width: 100%; max-height: 300px"
            class="facility-image"
          >
            <template #error>
              <div class="image-error">
                <el-icon><Picture /></el-icon>
                <span>图片加载失败</span>
              </div>
            </template>
          </el-image>
        </div>
        <el-empty v-else description="暂无照片" />

        <!-- 问题报告部分 -->
        <div class="section-title">
          <h3>
            <el-icon><QuestionFilled /></el-icon> 问题报告
          </h3>
          <el-button
            type="primary"
            size="small"
            @click="openAddIssueDialog"
            v-if="userStore.userInfo?.role === 'student'"
            class="add-issue-btn"
          >
            <el-icon class="el-icon--left"><Plus /></el-icon>
            提交问题
          </el-button>
        </div>
        <div v-if="issues && issues.length > 0" class="issues-section">
          <el-table :data="issues" style="width: 100%" class="issues-table">
            <el-table-column prop="date" label="日期" width="100" />
            <el-table-column prop="reporter_name" label="报告人" width="100" />
            <el-table-column prop="type" label="问题类型" width="120" />
            <el-table-column prop="description" label="描述" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.status === '已处理' ? 'success' : 'warning'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="priority" label="优先级" width="80">
              <template #default="scope">
                <el-tag
                  :type="
                    scope.row.priority === '高'
                      ? 'danger'
                      : scope.row.priority === '中'
                        ? 'warning'
                        : 'info'
                  "
                >
                  {{ scope.row.priority }}
                </el-tag>
              </template>
            </el-table-column>
            <!-- 管理员回复列 -->
            <el-table-column prop="adminReply" label="管理员回复">
              <template #default="scope">
                <span v-if="scope.row.adminReply">{{ scope.row.adminReply }}</span>
                <el-tag v-else type="info" size="small">暂无回复</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-empty v-else description="暂无问题报告" />
      </div>
    </el-dialog>

    <!-- 分步提交问题弹窗 -->
    <el-dialog
      v-model="showAddIssueDialog"
      :title="`提交问题 (${activeStep + 1}/3)`"
      width="50%"
      destroy-on-close
      custom-class="issue-dialog"
      :close-on-click-modal="false"
    >
      <el-steps :active="activeStep" finish-status="success" simple style="margin-bottom: 20px">
        <el-step title="基本信息" />
        <el-step title="详细描述" />
        <el-step title="确认提交" />
      </el-steps>

      <div class="step-content-container">
        <!-- 步骤1：基本信息 -->
        <div v-if="activeStep === 0" class="step-content">
          <el-form :model="issueForm" label-width="100px" :rules="issueRules" ref="issueFormRef">
            <el-form-item label="问题类型" prop="type">
              <el-select v-model="issueForm.type" placeholder="请选择问题类型" style="width: 100%">
                <el-option label="设施损坏" value="设施损坏" />
                <el-option label="卫生问题" value="卫生问题" />
                <el-option label="安全隐患" value="安全隐患" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
            <el-form-item label="优先级" prop="priority">
              <el-radio-group v-model="issueForm.priority">
                <el-radio label="高">高</el-radio>
                <el-radio label="中">中</el-radio>
                <el-radio label="低">低</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>

        <!-- 步骤2：详细描述 -->
        <div v-else-if="activeStep === 1" class="step-content">
          <el-form :model="issueForm" label-width="100px">
            <el-form-item label="问题描述" prop="description">
              <el-input
                v-model="issueForm.description"
                type="textarea"
                :rows="6"
                placeholder="请详细描述您遇到的问题，包括问题发生的时间、具体位置、影响范围等信息"
              />
            </el-form-item>
            <el-form-item label="上传图片" prop="images">
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="3">
                <el-icon><Plus /></el-icon>
              </el-upload>
              <div class="el-upload__tip">可选择上传问题相关图片（最多3张）</div>
            </el-form-item>
          </el-form>
        </div>

        <!-- 步骤3：确认提交 -->
        <div v-else-if="activeStep === 2" class="step-content">
          <div class="confirm-info">
            <h3>请确认以下信息</h3>
            <el-descriptions :column="1" border>
              <el-descriptions-item label="设施名称">{{
                selectedFeature?.attributes.Name || '未知'
              }}</el-descriptions-item>
              <el-descriptions-item label="问题类型">{{ issueForm.type }}</el-descriptions-item>
              <el-descriptions-item label="优先级">{{ issueForm.priority }}</el-descriptions-item>
              <el-descriptions-item label="问题描述">{{
                issueForm.description
              }}</el-descriptions-item>
              <el-descriptions-item label="报告人">{{
                userStore.userInfo?.name
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAddIssueDialog = false">取消</el-button>
          <el-button v-if="activeStep > 0" @click="prevStep">
            <el-icon class="el-icon--left"><ArrowLeft /></el-icon>上一步
          </el-button>
          <el-button v-if="activeStep < 2" type="primary" @click="nextStep">
            下一步<el-icon class="el-icon--right"><ArrowRight /></el-icon>
          </el-button>
          <el-button v-else type="success" @click="submitIssue" :loading="submitting">
            <el-icon class="el-icon--left"><Check /></el-icon>确认提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.dashboard-layout {
  display: flex;
  flex: 1;
  height: calc(100vh - 140px);
  gap: 20px;
  overflow: hidden;
}

.facility-panel {
  width: 350px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-header {
  padding: 15px;
  border-bottom: 1px solid #ebeef5;

  h2 {
    margin: 0 0 15px 0;
    font-size: 18px;
    color: #303133;
    display: flex;
    align-items: center;

    &::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 18px;
      background-color: #409eff;
      margin-right: 8px;
      border-radius: 2px;
    }
  }

  .search-bar {
    margin-bottom: 12px;

    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 1px #dcdfe6 inset;
      transition: all 0.2s;

      &:hover {
        box-shadow: 0 0 0 1px #c0c4cc inset;
      }

      &.is-focus {
        box-shadow: 0 0 0 1px #409eff inset;
      }
    }
  }

  .filter-bar {
    .filter-select {
      width: 100%;
    }
  }
}

.facility-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #e0e0e0;
    border-radius: 3px;

    &:hover {
      background-color: #c0c0c0;
    }
  }

  &::-webkit-scrollbar-track {
    background-color: #f5f5f5;
  }
}

.facility-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background-color: #f5f7fa;
  }

  &-active {
    background-color: #ecf5ff;
    border-left: 3px solid #409eff;

    &:hover {
      background-color: #ecf5ff;
    }
  }

  .facility-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #f0f7ff;
    border-radius: 8px;
    margin-right: 12px;
    color: #409eff;

    .el-icon {
      font-size: 20px;
    }
  }

  .facility-info {
    flex: 1;
    overflow: hidden;

    h3 {
      margin: 0 0 5px 0;
      font-size: 16px;
      color: #303133;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .facility-type {
      margin: 0 0 5px 0;
      font-size: 13px;
      color: #606266;
      display: flex;
      align-items: center;

      &::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #67c23a;
        margin-right: 5px;
      }
    }

    .facility-address {
      margin: 0;
      font-size: 12px;
      color: #909399;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
    }
  }
}

.map-container {
  flex: 1;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.map-view {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;

  .guide-button {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;

    .el-button {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
}

.guide-content {
  h3 {
    margin-top: 0;
    color: #303133;
    font-size: 16px;
  }

  .guide-step {
    display: flex;
    margin-bottom: 15px;

    .step-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background-color: #f0f7ff;
      border-radius: 50%;
      margin-right: 10px;
      color: #409eff;
      flex-shrink: 0;
    }

    .step-content {
      h4 {
        margin: 0 0 5px 0;
        font-size: 14px;
        color: #303133;
      }

      p {
        margin: 0;
        font-size: 12px;
        color: #606266;
        line-height: 1.5;
      }
    }
  }
}

.facility-dialog {
  :deep(.el-dialog__header) {
    padding: 15px 20px;
    margin-right: 0;
    border-bottom: 1px solid #ebeef5;
  }

  :deep(.el-dialog__body) {
    padding: 20px;
  }

  :deep(.el-dialog__footer) {
    padding: 15px 20px;
    border-top: 1px solid #ebeef5;
  }
}

.facility-details {
  .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 15px;

    h3 {
      margin: 0;
      font-size: 16px;
      color: #303133;
      display: flex;
      align-items: center;

      .el-icon {
        margin-right: 5px;
        color: #409eff;
      }
    }

    .add-issue-btn {
      margin-left: auto;
    }
  }

  .facility-photo-section {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;

    .facility-image {
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .image-error {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 200px;
      background-color: #f5f7fa;
      color: #909399;

      .el-icon {
        font-size: 32px;
        margin-bottom: 10px;
      }
    }
  }

  .issues-section {
    margin-top: 15px;

    .issues-table {
      border-radius: 4px;
      overflow: hidden;

      :deep(.el-table__header) {
        background-color: #f5f7fa;
      }

      :deep(.el-table__row) {
        transition: all 0.3s;

        &:hover {
          background-color: #f5f7fa;
        }
      }
    }
  }
}

.issue-dialog {
  :deep(.el-dialog__header) {
    padding: 15px 20px;
    margin-right: 0;
    border-bottom: 1px solid #ebeef5;
  }

  :deep(.el-dialog__body) {
    padding: 20px;
  }

  :deep(.el-dialog__footer) {
    padding: 15px 20px;
    border-top: 1px solid #ebeef5;
  }

  .step-content-container {
    min-height: 300px;

    .step-content {
      padding: 10px 0;
    }

    .confirm-info {
      h3 {
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 16px;
        color: #303133;
      }
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
}

// 自定义 Element Plus 组件样式
:deep(.el-descriptions) {
  margin-bottom: 20px;

  .el-descriptions__header {
    margin-bottom: 10px;
  }

  .el-descriptions__title {
    font-size: 16px;
    font-weight: bold;
  }

  .el-descriptions__body {
    background-color: #fff;
  }

  .el-descriptions__label {
    font-weight: bold;
  }
}

:deep(.el-empty) {
  padding: 30px 0;
}

:deep(.el-steps--simple) {
  background-color: #f5f7fa;
  padding: 10px;
  border-radius: 4px;

  .el-step__title {
    font-size: 14px;
  }
}

:deep(.el-upload--picture-card) {
  --el-upload-picture-card-size: 100px;
  border-radius: 8px;

  &:hover {
    border-color: #409eff;
  }
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

// 响应式调整
@media screen and (max-width: 1200px) {
  .dashboard-layout {
    flex-direction: column;
    height: auto;
  }

  .facility-panel {
    width: 100%;
    height: 300px;
  }

  .map-container {
    height: calc(100vh - 460px);
    min-height: 400px;
  }
}

// 动画效果
.el-dialog__wrapper {
  :deep(.el-dialog) {
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
  }
}

.el-dialog-fade-enter-from,
.el-dialog-fade-leave-to {
  :deep(.el-dialog) {
    transform: translateY(-20px);
    opacity: 0;
  }
}
</style>
